<template>
  <div id="app">
    <nav>
      <button @click="getbooks(1)">获取书目1</button>
      <button @click="getbooks(2)">获取书目2</button>
    </nav>
    <div id="content">
      <table style="text-align:left">
        <tr>
          <th>书名</th><th>作者</th><th>价格</th>
        </tr>
        <tr v-for="book in books" :key="book.id">
          <td>{{ book.title }}</td>
          <td>{{ book.author }}</td>
          <td>{{ book.price }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import { ref } from "vue";

let books = ref([]);

function getbooks(num) {
  let url = "books1.json";
  if (num == 2) {
    url = "books2.json";
  }
  axios.get(url).then((res) => {
    if (res.status == 200) {
      console.log(res);
      books.value = res.data;
    } else {
      console.log("返回数据错误！");
    }
  }).catch((error) => {
    console.log("请求错误：", error);
  });
}
</script>

<style scoped>
button {
  margin: 10px;
}

#content {
  border-top: 1px solid #999;
  padding: 10px;
}
</style>
